<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="resources/test2.css">
</head>

<body>
    
    <div id="app">
        <div id="searchBox">
            <form action="testListen.html" method="get">
                <input type="text" name="searchName" id="searchName" placeholder="请输入姓名查询" v-model="searchForm.name">
                <input type="checkbox" name="searchTitle" id="searchTitle1" v-model="searchForm.title1">
                <label for="searchTitle1">仅讲师</label>
                <input type="checkbox" name="searchTitle" id="searchTitle2" v-model="searchForm.title2">
                <label for="searchTitle2">仅助教</label>
                <input type="checkbox" name="searchTitle" id="searchTitle3" v-model="searchForm.title3">
                <label for="searchTitle3">仅副教授</label>
                <input type="checkbox" name="searchTitle" id="searchTitle4" v-model="searchForm.title4">
                <label for="searchTitle4">仅教授</label>

                <button type="button" id="searchBtn" @click="search()">查询</button>
                <input type="reset" id="resetBtn" value="重置" @click="resetForm()">
            </form>
        </div>

        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>头像</th>
                <th>职称</th>
            </tr>
            <tr v-for="(item, index) in filteredEmpList" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td><img v-bind:src='item.headShot' alt="头像"></td>
                <td v-if="item.title === '1'">教员</td>
                <td v-else-if="item.title === '2'">讲师</td>
                <td v-else-if="item.title === '3'">副教授</td>
                <td v-else-if="item.title === '4'">教授</td>
            </tr>
        </table>


        <script type="module" src="resources/test2.js"></script>
</body>

</html>